<template>
    <div class="update">
        <h2>学生信息</h2>
        <form>
            <!-- 第一行 -->
            <p>
                <tr>
                    <td>姓名：{{ name }}</td>
                </tr>
            </p>
            <!-- 第二行 -->
            <p>
                <tr>
                    <td>年龄：</td>
                    <td><input type="text" v-model=age></td>
                </tr>
            </p>
            <!-- 第三行 -->
            <p>
                <tr>
                    <td>性别：</td>
                    <td>
                        <input type="radio" name="sex" id="nan" v-model=sex value="男"><label for="nan"><img src="./image/man.png"
                                width="20"> 男</label>
                        <input type="radio" name="sex" id="nv" v-model=sex value="女"><label for="nv"><img src="./image/woman.png" width="20">
                            女</label>
                    </td>
                </tr>
            </p>
            <!-- 第四行 -->
            <p>
                <tr>
                    <td>爱好：</td>
                    <td>
                        <input type="checkbox" name="hobby" id="pingpongqiu" v-model="isChecked1"><label for="pingpongqiu">打乒乓球</label>
                        <input type="checkbox" name="hobby" id="yumaoqiu" v-model="isChecked2"><label for="yumaoqiu">打羽毛球</label>
                        <input type="checkbox" name="hobby" id="lanqiu" v-model="isChecked3"><label for="lanqiu">打篮球</label>
                        <input type="checkbox" name="hobby" id="huaxue" v-model="isChecked4"><label for="huaxue">滑雪</label>
                    </td>
                </tr>
            </p>
            <!-- 第五行 -->
            <p>
                <tr>
                    <td>所属院校：</td>
                    <td>
                        <select v-model=school>
                            <option>湖北工业大学</option>
                            <option>武汉大学</option>
                            <option>华中科技大学</option>
                            <option>武汉工程大学</option>
                        </select>
                    </td>
                </tr>
            </p>
            <!-- 第六行 -->
            <p>
                <tr>
                    <td>
                        <button type="button" @click="up()">确认</button>
                    </td>
                    <td>
                        <input type="reset" value="重新填写" @click="init">
                    </td>
                    <td>
                        <button type="button" @click="cancel()">取消</button>
                    </td>
                </tr>
            </p>
        </form>
    </div>
</template>


<script setup lang="ts" name="Update">
import router from '@/router';
import axios from 'axios'
import {ref,reactive} from "vue"
import {useRoute} from 'vue-router'

const route=useRoute();
// console.log(route);
    //数据
    let name:string=route.query.name as string;
    let age:number=parseInt(route.query.age as string);
    let sex:string=route.query.sex as string;
    let hobby:string[]=route.query.hobby as string[];
    let school:string=route.query.school as string;
    let isChecked1:boolean;
    let isChecked2:boolean;
    let isChecked3:boolean;
    let isChecked4:boolean;
    for(let i=0;i<route.query.hobby.length;i++)
    {
        if(route.query.hobby[i]=="打乒乓球")
            isChecked1=true;
        if(route.query.hobby[i]=="打羽毛球")
            isChecked2=true;
        if(route.query.hobby[i]=="打篮球")
            isChecked3=true;
        if(route.query.hobby[i]=="滑雪")
            isChecked4=true;
    }
    class Student{
        name:string;
        age: number;
        sex: string;
        hobby: string[];
        school: string;

        constructor(name:string,age: number,sex: string,hobby: string[],school: string){
            this.name=name;
            this.age=age;
            this.sex=sex;
            this.hobby=hobby;
            this.school=school;
        }
    }
    //方法
    function up(){
        let f=check();
        if(f==1)
            return;
        //每次进行操作前将数组清空
        hobby=[];
        if(isChecked1)
            hobby.push("打乒乓球");
        if(isChecked2)
            hobby.push("打羽毛球");
        if(isChecked3)
            hobby.push("打篮球");
        if(isChecked4)
            hobby.push("滑雪");
        if(!isChecked1&&!isChecked2&&!isChecked3&&!isChecked4)
            hobby.push("无");
        const student =new Student(name,age,sex,hobby,school);
        // console.log(student);
        axios.post('http://localhost:3000/api/updatedata',{
            data:student
        });
        router.push('/student');
    }
    function init(){
        age=NaN;
        sex="";
        school="湖北工业大学";
        isChecked1=false;
        isChecked2=false;
        isChecked3=false;
        isChecked4=false;
    }
    function check(): number{
        if(age==undefined||Number.isNaN(age))
        {
            alert("年龄不能为空");
            return 1;
        }
        if(age<0||age>150)
        {
            alert("年龄必须在0-150岁之间");
            return 1;
        }
        if(sex==undefined||sex=="")
        {
            alert("性别不能为空");
            return 1;
        }
        return 0;
    }
    function cancel(){
        router.push('/student');
    }
</script>


<style></style>